<template>
  <section class="component case-repay-chart">
    <common-title title="案件量监控">
      <num-type-select slot="append" v-model="currentNumType" @onNumTypeChange="onChange()"></num-type-select>
    </common-title>
    <ve-histogram height="450px" legend-position="bottom" :data="caseRepayChart.data" :settings="caseRepayChart.setting"></ve-histogram>

  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import NumTypeSelect from "~/components/dashboard/num-type-select.vue";
import { VeHistogram } from "v-charts";
import { Layout, Dependencies } from "~/core/decorator";
import { HomePageService } from '~/services/domain-service/home-page.service';
import CommonTitle from "~/components/common/common-title.vue";

@Component({
  components: {
    VeHistogram,
    NumTypeSelect,
    CommonTitle
  }
})
export default class CaseRepayChart extends Vue {
  @Dependencies(HomePageService)
  private homePageService: HomePageService

  private currentNumType: number = 0

  private get initDataRows() {
    const dictData: any = this.$dict.getDictData('OverduePeriodStatus')
    return dictData.map(v => {
      return {
        overduePeriod: v.name,
        currentCaseAmount: 0,
        caseTotalAmount: 0,
        currentCaseNumber: 0,
        caseTotalNumber: 0,
      }
    })
  }

  private settings: any = {
    // 按金额的设置
    amount: {
      metrics: ["currentCaseAmount", "caseTotalAmount"],
      dimension: ["overduePeriod"],
      yAxisName: ["单位：万元"],
      labelMap: {
        overduePeriod: "逾期阶段",
        currentCaseAmount: "当日新增案件金额",
        caseTotalAmount: "总案件金额"
      }
    },
    // 按户数的设置
    num: {
      metrics: ["currentCaseNumber", "caseTotalNumber"],
      dimension: ["overduePeriod"],
      yAxisName: ["单位：件"],
      labelMap: {
        overduePeriod: "逾期阶段",
        currentCaseNumber: "当日新增案件数",
        caseTotalNumber: "案件总数"
      }
    }
  }

  private caseRepayChart: any = {
    data: {
      columns: [
        "overduePeriod",
        "currentCaseNumber",
        "caseTotalNumber",
        "currentCaseAmount",
        "caseTotalAmount"
      ],
      rows: this.initDataRows
    },
    setting: this.settings.amount
  }

  private onChange() {
    console.log(1111, this.currentNumType)
    const setting: any = this.currentNumType === 0 ? this.settings.amount : this.settings.num
    this.caseRepayChart.setting = setting
    this.updateData()
  }

  private updateData() {
    this.homePageService.getHomeCaseTotal().subscribe(
      data => {
        const rows: any[] = []
        for (const item of this.initDataRows) {
          const temp: any = data.find(v => v.overduePeriod === item.overduePeriod)
          rows.push({
            overduePeriod: item.overduePeriod,
            currentCaseAmount: temp ? temp.currentCaseAmount : item.currentCaseAmount,
            caseTotalAmount: temp ? temp.caseTotalAmount : item.caseTotalAmount,
            currentCaseNumber: temp ? temp.currentCaseNumber : item.currentCaseNumber,
            caseTotalNumber: temp ? temp.caseTotalNumber : item.caseTotalNumber,
          })
        }
        this.caseRepayChart.data.rows = rows
      }
    )
  }

  private mounted() {
    this.updateData();
  }
}
</script>

<style lang="less" scoped>
</style>
